<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .father{
        width: 400px;
        height: 400px;
        border:1px solid red;
        position: relative;
    }
    .son{
        width: 200px;
        height: 200px;
        border:1px solid red;
        position: absolute;
    }
</style>
<body>
    <div class="father" >
        <div class="son">儿子</div>
    </div>
<script>
   const father =  document.querySelector('.father')
    const son = document.querySelector('.son')
    father.addEventListener('click',(e) =>{console.log('father--')
        e.stopImmediatePropagation()
    },true)
    son.addEventListener('click',() =>{console.log('son--')},false)

</script>
</body>
</html>